@extends('layouts.adminlayout')

@section('main')
<style type="text/css">
    .background-grey{
        background-color: grey !important;
    }
    .background-green{
        background-color: #00a65a !important;
    }
    .background-yellow{
        background-color: #f39c12 !important;
    }
    .background-red{
        background-color: #f56954 !important;
    }
    .background-blue{
        background-color: #00c0ef !important;
    }
</style>
<section class="content">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="row">
            <div class="col-lg-4 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green" id="tk_hocvien">
                    <div class="inner">
                        <h3>
                            Tổng Hợp<sup style="font-size: 20px"></sup>
                        </h3>
                        <p>
                            Tra Cứu
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-android-contact"></i>
                    </div>
                    <a id="tk_hocvien_a" href="<?php echo asset('statistics/tkhocvien') ?>" class="small-box-footer"   target="tk_iframe">
                        Tiến hành thống kê <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
            <div class="col-lg-4 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua" id="tk_bangcap" >
                    <div class="inner">
                        <h3>
                            Số Liệu Bằng Cấp
                        </h3>
                        <p>
                            Thống kê
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a id="tk_bangcap_a" href="<?php echo asset('statistics/tkbangcap') ?>" class="small-box-footer"  target="tk_iframe">
                        Tiến hành thống kê <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div><!-- ./col -->
            <!-- <div class="col-lg-3 col-xs-6">
                 
                <div class="small-box bg-red" id="tk_chungchi">
                    <div class="inner">
                        <h3>
                            Chứng Chỉ
                        </h3>
                        <p>
                            Thống kế
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-android-folder"></i>
                    </div>
                    <a id="tk_chungchi_a" href="<?php //echo asset('statistics/tkchungchi') ?>" class="small-box-footer"  target="tk_iframe">
                        Tiến hành thống kê <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>  -->
            <div class="col-lg-4 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red" id="tk_ketqua">
                    <div class="inner">
                        <h3>
                            Kết Quả
                        </h3>
                        <p>
                            Thống Kê
                        </p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a id="tk_ketqua_a" href="<?php echo asset('statistics/tkketqua') ?>" class="small-box-footer"   target="tk_iframe">
                        Tiến hành thống kê <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<iframe src="about:blank" style="width:100%; min-height:500px;border: solid 0px;" name="tk_iframe"></iframe>


<script type="text/javascript">
    $('#tk_hocvien').hover(function() {
        $('#tk_hocvien').addClass('background-green');
    }, function() {
        $('#tk_hocvien').removeClass('background-green');
    });
    $('#tk_bangcap').hover(function() {
        $('#tk_bangcap').addClass('background-blue');
    }, function() {
        $('#tk_bangcap').removeClass('background-blue');
    });
    // $('#tk_chungchi').hover(function() {
    //     $('#tk_chungchi').addClass('background-red');
    // }, function() {
    //     $('#tk_chungchi').removeClass('background-red');
    // });
    $('#tk_ketqua').hover(function() {
        $('#tk_ketqua').addClass('background-red');
    }, function() {
        $('#tk_ketqua').removeClass('background-red');
    });

    $('#tk_hocvien_a').click(function(event) {
        $('#tk_hocvien').removeClass('background-grey');
        $('#tk_bangcap').addClass('background-grey');
        // $('#tk_chungchi').addClass('background-grey');
        $('#tk_ketqua').addClass('background-grey');
    });
    $('#tk_bangcap_a').click(function(event) {
        $('#tk_hocvien').addClass('background-grey');
        // $('#tk_chungchi').addClass('background-grey');
        $('#tk_bangcap').removeClass('background-grey');
        $('#tk_ketqua').addClass('background-grey');
    });
    // $('#tk_chungchi_a').click(function(event) {
    // 	$('#tk_hocvien').addClass('background-grey');
    // 	$('#tk_bangcap').addClass('background-grey');
    // 	$('#tk_chungchi').removeClass('background-grey');
    //        $('#tk_ketqua').addClass('background-grey');
    // });
    $('#tk_ketqua').click(function(event) {
        $('#tk_hocvien').addClass('background-grey');
        $('#tk_bangcap').addClass('background-grey');
        // $('#tk_chungchi').addClass('background-grey');
        $('#tk_ketqua').removeClass('background-grey');
    });

</script>
@stop